<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2022 APThink David唐 all rights reserved.
 * 版权所有，侵权必究！
 *
-->
<template>
  <el-row :gutter="12">
    <el-col :xs="24" :md="10">
      <el-form-item :label="$t('label.department')">
        <el-tree-select
          v-model="query.departments"
          :check-strictly="true"
          :data="departmentOptions"
          :placeholder="$t('label.departmentTip')"
          style="width: 100%"
          multiple
          show-checkbox
        />
      </el-form-item>
    </el-col>
    <el-col class="hidden-sm-and-down" :md="7">
      <el-form-item :label="$t('label.role')">
        <el-tree-select
          v-model="query.roles"
          :check-strictly="true"
          :data="roleOptions"
          :placeholder="$t('label.rolesTip')"
          style="width: 100%"
          multiple
          show-checkbox
        />
      </el-form-item>
    </el-col>
    <el-col :xs="20" :sm="20" :md="5">
      <el-form-item :label="$t('label.name')">
        <el-input
          v-model="query.name"
          :placeholder="$t('label.nameAccountTip')"
        />
      </el-form-item>
    </el-col>
    <el-col :xs="4" :sm="4" :md="2">
      <el-button @click="onFilterClick">{{ $t("button.filter") }}</el-button>
    </el-col>
  </el-row>
  <el-table
    :data="datas"
    stripe
    style="width: 100%"
    :empty-text="$t('label.emptydata')"
    row-key="uid"
  >
    <el-table-column type="expand">
      <template #default="scope">
        <el-form label-position="right" label-width="30%">
          <el-row>
            <el-col :span="12">
              <el-form-item>
                <el-button type="primary" @click="onConfirmClick(scope.row)">{{
                  $t("button.save")
                }}</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('label.state')">
                <!-- 
                <el-radio-group v-model="scope.row.state">
                  <el-radio :label="0">{{ $t("state.0") }}</el-radio>
                  <el-radio :label="1">{{ $t("state.1") }}</el-radio>
                </el-radio-group>
                -->
                <el-switch
                  v-model="scope.row.state"
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #ff4949;
                  "
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('label.userdepartments')">
                <el-tree-select
                  v-model="scope.row.departments"
                  :check-strictly="true"
                  :data="departmentOptions"
                  :placeholder="$t('label.userdepartmentsTip')"
                  style="width: 100%"
                  multiple
                  show-checkbox
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('label.roles')">
                <el-tree-select
                  v-model="scope.row.roles"
                  :check-strictly="true"
                  :data="roleOptions"
                  :placeholder="$t('label.rolesTip')"
                  style="width: 100%"
                  multiple
                  show-checkbox
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <base-data-select
                category="usercategory"
                v-model="scope.row.category"
                enableAdd
              />
            </el-col>
            <el-col :span="12">
              <sys-data-select
                category="salarytype"
                v-model="scope.row.salarytype"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('label.rfid')">
                <el-input v-model="scope.row.rfid" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('label.nativeplace')">
                <el-input v-model="scope.row.nativeplace" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('label.birthday')">
                <el-date-picker
                  v-model="scope.row.birthday"
                  type="date"
                  :placeholder="$t('label.birthdayTip')"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('label.contact')">
                <el-input v-model="scope.row.contact" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('label.address')">
                <el-input
                  v-model="scope.row.address"
                  type="textarea"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item :label="$t('label.description')">
                <el-input
                  v-model="scope.row.description"
                  type="textarea"
                  autocomplete="off"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('label.photourl')">
                <image-url
                  v-model="scope.row.photourl"
                  category="user"
                  shapeType="circle"
                ></image-url>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </el-table-column>
    <template v-for="f in fields">
      <el-table-column
        v-if="f.key == 'department'"
        :label="$t('label.department')"
        :key="f.key + '_department'"
        :width="f.minwidth"
        :sortable="f.sortable"
      >
        <template #default="scope">
          {{ department.getFullName(scope.row.departmentuid) }}
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="f.key == 'usercategory'"
        :label="$t('label.usercategory')"
        :key="f.key + '_usercategory'"
        :width="f.minwidth"
      >
        <template #default="scope">
          {{ scope.row.category }}
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="f.key == 'salarytype'"
        :label="$t('label.salarytype')"
        :key="f.key + '_salarytype'"
        :width="f.minwidth"
        :sortable="f.sortable"
      >
        <template #default="scope">
          {{
            scope.row.salarytype ? $t("salarytype." + scope.row.salarytype) : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="f.key == 'userdepartments'"
        :label="$t('label.userdepartments')"
        :key="f.key + '_userdepartments'"
        :width="f.minwidth"
      >
        <template #default="scope">
          {{ department.getNames(scope.row.departments) }}
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="f.key == 'roles'"
        :label="$t('label.roles')"
        :key="f.key + '_roles'"
        :width="f.minwidth"
        :sortable="f.sortable"
      >
        <template #default="scope">
          {{ role.getNames(scope.row.roles) }}
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="f.key == 'state'"
        :label="$t('label.state')"
        :key="f.key + '_state'"
        :width="f.minwidth"
        :sortable="f.sortable"
      >
        <template #default="scope">
          {{ $t("state." + scope.row.state) }}
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="f.key == 'photourl'"
        :label="$t('label.photourl')"
        :key="f.key + '_photourl'"
        :width="f.minwidth"
      >
        <template #default="scope">
          <el-avatar
            v-if="scope.row.photourl"
            :size="50"
            :src="scope.row.photourl"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="f.key == 'operator'"
        :key="f.key + '_operator'"
        :width="f.minwidth"
      >
        <template #header>
          <column-operator
            name="user"
            :allFields="allFields"
            :fields="fields"
            @refreshColumnField="refreshColumnField"
            @add="onAddClick()"
            advance
          />
        </template>
        <template #default="scope">
          <el-button-group>
            <row-operator
              name="user"
              :title="scope.row.account"
              @edit="onEditClick(scope.row)"
              @delete="onDeleteClick(scope.row)"
            />
          </el-button-group>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :prop="f.key"
        :label="$t('label.' + f.key)"
        :key="f.key"
        :width="f.minwidth"
        :sortable="f.sortable"
      />
    </template>
  </el-table>
  <el-dialog
    v-model="dialogEditVisible"
    :title="$t('dialog.user')"
    draggable
    destroy-on-close
  >
    <el-form label-width="30%">
      <el-form-item :label="$t('label.account')">
        <el-input v-model="current.account" autocomplete="off" />
      </el-form-item>
      <el-form-item :label="$t('label.username')">
        <el-input v-model="current.name" autocomplete="off" />
      </el-form-item>
      <el-form-item :label="$t('label.department')">
        <el-tree-select
          v-model="current.departmentuid"
          :check-strictly="true"
          :data="departmentOptions"
          :placeholder="$t('label.departmentTip')"
          style="width: 100%"
        />
      </el-form-item>
      <base-data-select category="gender" v-model="current.gender" enableAdd />
      <el-form-item :label="$t('label.mobile')">
        <el-input v-model="current.mobile" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogEditVisible = false">{{
        $t("button.cancel")
      }}</el-button>
      <el-button type="primary" @click="handleSave">{{
        $t("button.confirm")
      }}</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { all, add, upd, del, queryUser } from "@/api";
import { copyObject, cache, CommonTree } from "@/utils";
import {
  ColumnOperator,
  RowOperator,
  BaseDataSelect,
  SysDataSelect,
  ImageUrl,
} from "@/components";
import { User } from "@/model";
import log from "loglevel";

export default {
  name: "User",
  // register the component
  components: {
    ColumnOperator,
    RowOperator,
    BaseDataSelect,
    SysDataSelect,
    ImageUrl,
  },
  data() {
    return {
      fields: [],
      allFields: [],
      query: { departments: null, roles: null, name: null },
      role: new CommonTree(),
      department: null,
      departmentOptions: [],
      roleOptions: [],
      datas: [],
      dialogEditVisible: false,
      current: {},
      currentmenus: null,
      currentRow: {},
      permissions: [],
      dialogPermissionVisible: false,
    };
  },
  computed: {},
  watch: {},
  mounted() {
    log.debug("=>User mounted");
    this.department = cache.getTableTree("department")
    this.departmentOptions = this.department.nodeOptions;
    const apis = [
      { type: "field", data: ["BrowseUser"] },
      { type: "all", data: ["role"] },
    ];
    all(apis).then((res) => {
      this.role.data = res.get("all").get("role");
      this.roleOptions = this.role.nodeOptions;
      this.allFields = res.get("allfields").get("BrowseUser");
      this.fields = res.get("userfields").get("BrowseUser");
    });
  },
  methods: {
    refreshColumnField(data) {
      this.fields = data;
    },
    getMenuName(uids) {
      if (uids == undefined || uids.length < 1) return "";
      var names = new Array();
      uids.forEach((x) => {
        // names.push(this.menus.getName(x))
        names.push(this.$t("menu." + x));
      });
      return names;
    },
    onAddClick() {
      this.current = new User();
      this.dialogEditVisible = true;
    },
    onDeleteClick(row) {
      del("user", row.uid).then(() => {
        let i = this.datas.findIndex((u) => {
          return u.uid == row.uid;
        });
        if (i > -1) {
          this.datas.splice(i, 1);
        }
      });
    },
    onEditClick(row) {
      this.current = new User();
      copyObject(row, this.current);
      this.currentRow = row;
      this.dialogEditVisible = true;
    },
    onConfirmClick(row) {
      this.current = new User();
      copyObject(row, this.current);
      this.currentRow = row;
      this.handleSave();
    },
    handleSave() {
      if (this.current.uid == undefined) {
        add("user", this.current).then((d) => {
          copyObject(d, this.current);
          this.datas.push(d);
          this.dialogEditVisible = false;
        });
      } else {
        upd("user", this.current).then((d) => {
          copyObject(d, this.currentRow);
          this.dialogEditVisible = false;
        });
      }
    },
    onFilterClick() {
      queryUser(this.query).then((d) => {
        //David: 暂时通过前台管控不显示超级用户
        let i = d.findIndex((x) => {
          return x.uid === "administrator";
        });
        if (i >= 0) {
          d.splice(i, 1);
        }
        this.datas = d;
      });
    },
  },
};
</script>
